<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册界面</title>
</head>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
<script type="text/javascript">
	function io1() {
		$.post("${pageContext.request.contextPath}/servletJqAjax", {
			"username" : $("#username").val()
		}, function(data) {
			if (data.toString() === 'ok') {
				$("#nameInfo").css("color", "green")
			} else {
				$("#nameInfo").css("color", "red")
			}
			$("#nameInfo").html(data);
		})
	}

	function io2() {
		$.post("${pageContext.request.contextPath}/servletJqAjax", {
			"password" : $("#pass").val()
		}, function(data) {
			if (data.toString() === 'ok') {
				$("#pwdInfo").css("color", "green")
			} else {
				$("#pwdInfo").css("color", "red")
			}
			$("#pwdInfo").html(data);
		})
	}

	function io3() {
		$.post("${pageContext.request.contextPath}/servletJqAjax", {
			"password" : $("#pass_1").val()
		}, function(data) {
			if (data.toString() === 'ok') {
				$("#pwdInfo_1").css("color", "green")
			} else {
				$("#pwdInfo_1").css("color", "red")
			}

		})
	}
</script>
<script type="text/javascript">
	var codeTime = 1000;
	function getCode(obj) {

		sendSms(obj);
	}
	//开启验证码倒计时，并且在时间内不能重复点击
	function startTime(obj) {
		var ins = setInterval(function() {
			if (codeTime == 0) {
				$(obj).attr("disabled", false);
				$(obj).val("获取验证码");
				codeTime = 10;
				clearInterval(ins);
			} else {
				$(obj).attr("disabled", true);
				$(obj).val("重新发送(" + codeTime + ")秒");
				codeTime--;
			}
		}, 1000);
	}

	///发送ajax请求获取验证码
	function sendSms(obj) {
		$.ajax({
			url : "${pageContext.request.contextPath}/CodeController",
			type : "POST",
			data : {
				"phone" : $("#phone").val()
			},
			success : function(res) {
				if (res.code == 200) {
					alert("获取验证码成功");
					startTime(obj);
				} else {
					alert("获取失败:" + res.msg);
				}
			}
		})
	}
</script>
<style type="text/css">
body {
	font-family: 楷体;
	font-size: 20px;
	background-image: url("../images/1.png");
	background-size: cover;
}

h1 {
	float: left;
	padding-left: 10%;
	color: #fff;
	font-size: 50px;
}

table {
	position: absolute;
	left: 55%;
	padding: 4% 4% 6% 3%;
	margin-right: 10%;
	margin-top: 0%;
	color: #fff;
	border-collapse: separate;
	border-spacing: 10px 20px;
}

.text {
	position: relative;
}

.form-control {
	width: 200px;
	padding: 7px 0px;
	color: #fff;
	border: none;
	border-bottom: 1px solid #fff;
	outline: none;
	background: transparent;
}

.form-control:focus {
	border-color: rgba(59, 137, 245, 0.5);
	outline: 0;
}

.box {
	background: rgba(0, 0, 1, .7);
	box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
	border-radius: 10px;
}

.submit {
	width: 80%;
	height: 50px;
	background-color: #3B89F5;
	border: none;
	font-size: 18px;
	color: #fff;
	border-radius: 8px;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.submit:HOVER {
	background-color: #0C6CED;
	color: #fff;
	cursor: pointer;
}

.Hyperlink {
	text-decoration: none;
}

/* .Hyperlink:HOVER {
	position: absolute;
	left: 15px;
	top: 5px;
	padding: 5px;
	background-color: #0095ff;
	border-radius: 5px;
	color: #fff;
	content: attr(title);
	z-index: 2;
	width: 120px;
} */
.a::HOVER {
	position: absolute;
	left: 15px;
	top: 20px;
	padding: 50px;
	background-color: #0095ff;
	border-radius: 5px;
	color: #fff;
	content: attr(title);
	z-index: 2;
	width: 120px;
}

.b::HOVER {
	position: absolute;
	left: 15px;
	top: 5px;
	padding: 5px;
	background-color: #0095ff;
	border-radius: 5px;
	color: #fff;
	content: attr(title);
	z-index: 2;
	width: 120px;
}

textarea {
	resize: none;
}
</style>
<body>
	<div>
		<form action="../User_RegisterServlet" method="post"
			name="frm_register">
			<table style="background-color: Light purple">
				<tr>
					<th colspan="4" style="font-size: 30px;">用户注册</th>
				</tr>
				<tr>
					<td class="text" align="center">用户名:</td>
					<td colspan="3"><input class="form-control form-input a"
						type="text" name="username" id="username" onblur="io1()" autofocus="autofocus"><span
						id="nameInfo"></span></td>
				</tr>
				<tr>
					<td class="text" align="center">密码:</td>
					<td><input class="form-control form-input a" type="password"
						name="pass" id="pass" ><span id="pwdInfo"></span></td>
					<br>
				</tr>
				<tr>
					<td class="text" align="center">确认密码:</td>
					<td><input class="form-control form-input a" type="password"
						name="pass_1" id="pass_1" ><span
						id="pwdInfo_1"></span></td>
				</tr>
				<tr>
					<td class="text" align="center">性别:</td>
					<td><input type="radio" name="sex" value="0">
						男&nbsp;&nbsp; <input type="radio" name="sex" value="1">
						女&nbsp;&nbsp;</td>
				</tr>
				<tr>
					<td class="text" align="center">职业:</td>
					<td><select name="profession">
							<option value="学生">学生</option>
							<option value="教师">教师</option>
					</select></td>
				</tr>
				<tr>
					<td class="text" align="center">个人爱好:</td>
					<td colspan="3">
					   <input type="checkbox" name="favourite" value="电脑网络">电脑网络&nbsp;&nbsp; 
					   <input type="checkbox" name="favourite" value="影视娱乐">影视娱乐&nbsp;&nbsp; 
					   <input type="checkbox" name="favourite" value="棋牌娱乐">棋牌娱乐&nbsp;&nbsp;
					</td>
				</tr>
				<tr>
					<td class="text" align="center">个人说明</td>
					<td colspan="3"><textarea name="note" rows="5" cols="40"></textarea></td>
				</tr>
				<tr>
					<td class="text" align="center">手机号:</td>
					<td><input class="form-control form-input a" id="phone"
						name="phone" type="text"> <input onclick="getCode(this);"
						type="button" value="获取验证码"></td>
				</tr>
				<tr>
					<td class="text" align="center">验证码:</td>
					<td><input class="form-control form-input a" name="code"
						type="text" /><br /></td>
				</tr>
				<tr>
					<td colspan="4" style="background-color: transparent;"
						align="center"><input class="sr" type="submit" value="注册">
						<input class="sr" type="reset"></td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>